<template>
  <div class="coupongift_list">
    <Row type="flex" justify="space-between" class="coupongift_list-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem :label-width="48">
              <div slot="label" style="transform: translateX(12px);">日期：</div>
              <datePickerYmd
                :dateOption="dateOption"
                @on-change="search"
                :dataType="dataType"
                :selectDateType.sync="selectDateType"
                v-model="timeDate"
                style="display:inline-block"
              ></datePickerYmd>
              <!-- {{ $route.params.startDate }} - {{ $route.params.endDate }} -->
            </FormItem>

            <FormItem :label-width="48">
              <div slot="label" style="transform: translateX(12px);">门店：</div>
              <!-- value-consists-of="LEAF_PRIORITY" -->
              <vueTreeselectChoice :multiple="true"
                                   ref="vueTreeselectChoice"
                                   @on-api-finish="apiFinish"
                                    @input="handleShop"

                                   permissionCode="moms:report:thirdpartyrevenue"
                                   v-model="ShopValue"></vueTreeselectChoice>
              <!-- <Select
                class="select-shop-item"
                v-model="searchObj.status"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option v-for="(item, index) in statusOption" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select> -->
              <!-- {{ $route.params.shopName }} -->
            </FormItem>
            <FormItem>
              <Button class="search-btn" type="primary" @click="search()">查询</Button>
            </FormItem>
          </Row>
          <Row>
            <FormItem>
              <Button
                class="search-btn"
                type="primary"
                @click="handleExport"
                v-if="hasPermission('moms:report:thirdpartyrevenueexport')"
                >导出</Button
              >
            </FormItem>
          </Row>
        </Row>
      </Form>
    </Row>

    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="isloading"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    >
      <template slot-scope="{ row }"
                slot="payType">
        <span>{{['消费','退款'][row.payType]}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="payAmount">
        <span :style="{color: row.payType == 1 ? 'red' : '' }"> <span v-if="row.payType == 1">－</span> {{row.payAmount}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="serviceAmount">
        <span :style="{color: row.payType == 1 ? 'red' : '' }"> <span v-if="row.payType == 1">－</span>{{row.serviceAmount}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="settleAmount">
        <span :style="{color: row.payType == 1 ? 'red' : '' }"> <span v-if="row.payType == 1">－</span>{{row.settleAmount}}</span>
      </template>
    </Table>
    <div class="page-box" >
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        :page-size-opts="$pageSizeOpts"
        show-sizer
        show-total
      />
    </div>
    <down-center
      ref="downCenterRef"
      perms="moms:report:thirdpartyrevenue"
      v-if="hasPermission('moms:report:thirdpartyrevenueexport')"
    ></down-center>
  </div>
</template>
<script>
import { paymentDetail } from '@/api/report/finance'
import regExp from '@/libs/regExp'
import DownCenter from '@/view/components/down-center/index.vue'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import errorCaptured from '@/libs/errorCaptured'
import dayjs from 'dayjs'
const PAY_CODE_TYPE = {
  1: '微信',
  2: '支付宝',
  3: '银联卡',
  4: '银联扫码',
  5: '外卡'
}
export default {
  name: 'report_finance_thirdpartyrevenue_detail',
  components: { DownCenter, vueTreeselectChoice, datePickerYmd },
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        pageIndex: 1,
        limit: 10,
        offset: 0
      },
      ShopValue: [],
      dataType: [
        { key: 'date', value: '日' },
        { key: 'month', value: '月' },
        { key: 'daterange', value: '自定义' }
      ],
      selectDateType: this.$route.params.dateType,
      dateOption: {
        disabledDate: date => {
          if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      timeDate: [this.$route.params.startDate, this.$route.params.endDate],
      regExp: regExp,
      isloading: false,
      total: 0,
      resData: [],
      columns: [
        {
          title: '门店',
          key: 'shopName',
          align: 'center'
        },
        { title: '日期', key: 'statDate', align: 'center' },
        { title: '商户订单号', key: 'orderCode', align: 'center' },
        {
          title: '交易类型',
          slot: 'payType',
          align: 'center'
        },
        {
          title: '交易渠道',
          // key: 'subPayCode',
          align: 'center',
          render: (h, params) => {
            return h('span', PAY_CODE_TYPE[params.row.subPayCode])
          }
        },
        { title: '交易金额(元)', align: 'center', slot: 'payAmount' },
        { title: '手续费(元)', align: 'center', slot: 'serviceAmount' },
        { title: '结算金额(元)', align: 'center', slot: 'settleAmount' }
      ]
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      if (this.selectDateType === 'daterange') return dayjs(this.timeDate[1]).add(1, 'day').format('YYYY-MM-DD 00:00:00')
      return this.timeDate[1]
    }
  },
  created () {
    // this.paymentDetail()
  },
  // activated () {
  //   this.paymentDetail()
  // },
  methods: {
    async paymentDetail () {
      if (!this.ShopValue.length) return this.$Message.error('请选择门店')
      this.isloading = true
      const [err, res] = await errorCaptured(paymentDetail, {
        ...this.searchObj,
        shopIds: this.searchObj.shopIds,
        startDate: this.startDate,
        endDate: this.endDate
      })
      this.isloading = false
      if (err) return null
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },
    handleExport () {
      let obj = { 'daterange': '3', 'month': '1', 'date': '0' }
      this.$refs.downCenterRef.addTask({
        merchantId: this.$store.state.user.merchantId,
        startDate: this.startDate,
        endDate: this.endDate,
        dateType: obj[this.selectDateType],
        shopIds: this.searchObj.shopIds,
        taskModule: 'thirdpartyPaymentDetail'
      })
    },
    async apiFinish () {
      this.ShopValue.push(this.$route.params.shopId)
      // this.paymentDetail()
    },
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      if (this.searchObj.pageIndex === 1) {
        this.paymentDetail()
      } else {
        this.searchObj.pageIndex = 1
      }
      // this.getShopList()
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.paymentDetail()
    },
    search () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.paymentDetail()
    },
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      // debugger
      this.searchObj.shopIds = ids
      this.search()
    }
  }
}
</script>
<style lang="less" scoped>
.coupongift_list {
  // display: flex;
  // flex-direction: column;
  // min-height: 100%;
  // min-width: 1082px;
  // .from {
  //   margin-top: 24px;
  // }
  .coupongift_list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
